<script>
const sex = [
    {
        value: '1',
        label: '男'
    },
    {
        value: '0',
        label: '女'
    }
]

export default {
    name: "formContentListJSX",
    data() {
        return {
            //表单素材
            form: {
                name: "姓名",
                phone: "手机号",
                sex: "性别"
            },
            //字典内容
            dictionary: {
                sex: sex
            },
            //字段转换
            fieldType: {
                sex: "array",
                createTime: "datetime"
            },
            //表单填充数据
            dataSource: [
                {
                    id: "1",//表单素材值id
                    formId: "1",//表单素材id
                    content: '{"name":"张三","phone":"14256354215","sex":"1"}'//表单素材值
                },
                {
                    id: "2",
                    formId: "1",
                    content: '{"name":"李四","phone":"17536524295","sex":"0"}'
                }
            ],
            //详情数据
            detailData: {},
            //操作类型
            actionType: "",
            //详情显示
            detailVisible: false
        }
    },
    mounted() {
        //解析数据
        let dataSource = []
        this.dataSource.map((item) => {
            let content = JSON.parse(item.content)
            item = {...item, ...content}
            delete item['content']
            dataSource.push(item)
        })

        this.dataSource = [...dataSource]
    },
    methods: {
        //element 不支持render 则使用选中当行来获取数据
        rowChange(row, column, event) {
            let that = this

            switch (that.actionType) {
                case "detail":
                    that.detailHandle(row);
                    break;
                case "edit":
                    that.updateHandle(row);
                    break;
            }
        },
        //详情操作
        detailHandle(data) {
            this.detailData = this.$utils.formatterForForm(data, this.fieldType, this.dictionary);
            this.detailVisible = true
        },
        //内容转化
        formatter(row, column) {
            let field = column.property;
            let value = row[field];
            return this.$utils.formatterForLable(field, value, this.fieldType, this['dictionary'][field]);
        }
    },
    render() {
        let columnDom = []

        //动态列表
        for (let key in this.form) {
            columnDom.push(
                <el-table-column prop={key} label={this.form[key]} formatter={this.formatter.bind(this)}></el-table-column>
            )
        }

        return (
            <div>
                <el-table data={this.dataSource} style="width: 100%" onRow-click={this.rowChange.bind(this)}>
                    {columnDom}
                    <el-table-column fixed="right" label="操作" width="100">
                        <el-button onClick={() => this.actionType = "detail"} type="text" size="small">详情</el-button>
                    </el-table-column>
                </el-table>

                <el-dialog ref="detailRefs" title="详情" visible={this.detailVisible} onClose={() => this.detailVisible = false}>
                    <el-form>
                        <el-form-item label="名称">
                            <el-input value={this.detailData.name} disabled></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" disabled>
                            <el-input value={this.detailData.phone} disabled></el-input>
                        </el-form-item>
                        <el-form-item label="性别" disabled>
                            <el-input value={this.detailData.sex} disabled></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button onClick={() => this.detailVisible = false}>返回</el-button>
                    </div>
                </el-dialog>
            </div>
        )
    }
}
</script>

<style scoped>

</style>